import {getValueForFilter} from "./xUtil.js";
import {findJsonByCode} from "./treeUtil.js"
import absContainer from "./absContainer.js";
import cell from './cell.js';


const tmplBase =`<div  type="filter" class="filter">
                    <div  type="filter-head">                   
                    </div>  
                    <div type="filter-main">
                       <div type="filter-body"></div>
                    </div>
                    <div  type="filter-footer">  
                       <div class="cell right " type="button">
                          <button title="" class="btn btn-sm btn-secondary m-1" type="filter-ok">
                             <span class="p-1">确认</span>
                          </button>                       
                          <button title="" class="btn btn-sm btn-secondary m-1" type="filter-close">
                             <span class="p-1">取消</span>
                          </button>
                        </div>                                     
                    </div>                         
                   </div>`;


export default class xFilter  extends absContainer {
    $container;
    $body;
    $head;
    $footer;
    $input;
    vCfg;

    constructor(el){
        super(el);
        this.$root.html(tmplBase);
        this.$head = this.$root.find('[type="filter-head"]');
        this.$body = this.$root.find('[type="filter-body"]');
        this.$footer = this.$root.find('[type="filter-footer"]');
        this.$root.on('click', 'span[type ="filter"]', this.evItemClick.bind(this));
        this.$root.on('click', 'span[type="filter-all"]', this.evAllClick.bind(this));
        this.$root.on('click', 'button[type="filter-close"]', this.evClose.bind(this));
        this.$root.on('click', 'button[type="filter-ok"]', this.evOk.bind(this));
        this.$root.on('input','input', this.evInput.bind(this));
    }

    prepare(cfg){
        this.vCfg =cfg;
        //this.vAfterFilterData = this.vCfg.data;
        //初始化的情况判断 如果空 则全部
        this.setItemCheckStatus();
        this.setAllCheckStatus();
        this.renderHead();
        this.renderBody();
    }



    show(cfg,$parent,$target){
        //console.log(cfg);
        this.prepare(cfg);
        this.setPos($parent,$target);
        this.vInnerClick = true;
        $(document).on(this.vClickId,this.evOff.bind(this));
        this.$root.show();
    }

    //
    setItemCheckStatus(){
        for(let j of this.vCfg.data){
            let check=true;
            if(this.vCfg.select && this.vCfg.select.length>0)
                check = this.vCfg.select.includes(j.code)
            j._checked = check;
        }
    }

    setAllCheckStatus(){
        let check = -1;
        for(let i of this.vCfg.data){
            if(check == -1)
                check = i._checked?1:0;
            else{
                if(check != (i._checked?1:0)){
                    check = 2;
                    break;
                }
            }
        }
        this.vAllChecked = (check==-1?0:check);
    };

    renderHead(){
        this.$head.html(cell.renderSearch({placeholder:'搜索...'}));
    }

    renderBody(val){

        let allItem = [];
        if(val){

            for(let d of this.vCfg.data){
                if(d._checked)
                    allItem.push(d);
            }
        }else{
            allItem.push({code:-1,name:'全选',_checked:this.vAllChecked,type:'',col:'col-sm-12'});
            allItem.push(...this.vCfg.data);
        }

        //allItem.push(...this.vAfterFilterData);
        //this.$body.html(xGrid.renderGrid({data:allItem,grid:"container",cbRenderCell:this.renderItem.bind(this)}));
        this.$body.html(cell.renderLists({data:allItem,callback:this.renderItem.bind(this)}));

    }

   renderItem(item){
       let cfg ={type:'filter',...item};
       cfg.name = getValueForFilter(item.name);
       return cell.renderFilterCell(cfg);
   }

   evItemClick(e){
       e.stopImmediatePropagation();
       this.vInnerClick = true;
       let code = e.currentTarget.parentNode.getAttribute("data-code");
       let item = findJsonByCode(this.vCfg.data,code);
       item._checked = !item._checked;
       this.setAllCheckStatus();
       this.renderBody();
   }

    evAllClick(e){
        this.vInnerClick = true;
        this.vAllChecked  = this.vAllChecked==2?1:this.vAllChecked==1?0:1;
        this.vCfg.data.forEach(d =>{
            d._checked = this.vAllChecked;
        });
        this.renderBody();
    }

    evOk(e){
        $(document).unbind(this.vClickId);
        this.$root.hide();
        let select=[];
        for(let j of this.vCfg.data){
            if(j._checked)
                select.push(j.code)
        }
        this.setAllCheckStatus();
        if(this.vCfg.ok);
            this.vCfg.ok(this.vCfg.field,select,this.vAllChecked);
    }

    evClose(e){
        this.$root.hide();
        $(document).unbind(this.vClickId);
    }

    evInput(e){
        let val = e.target.value;
        this.filter(val);
        this.renderBody(val);
    }

    filter(val){
        this.vCfg.data.forEach( d =>{
            if((d.name+'').indexOf(val)>-1 && d.name !='(空白)')
                 d._checked = true;
            else
                 d._checked =false;
        })
    }
}